<template>
  <div class="app-container">
    <div>
      <table>
        <tr>
          <td>客户名称：</td>
          <td>
            <el-input
              v-model="listQuery.customer_name"
              placeholder="请输入客户名称"
              style="width: 200px"
            />
          </td>
          <td>客户类型：</td>
          <td>
            <el-select
              v-model="listQuery.customer_type"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in option_customer_types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
          <td>客户管理人：</td>
          <td>
            <el-input
              v-model="listQuery.customer_account_managers"
              placeholder="请输入客户管理人"
              style="width: 200px"
            />
          </td>
          <td>
            <el-button type="primary" size="small" @click="getList">搜索</el-button>
          </td>
        </tr>
      </table>
    </div>
    <el-table
      v-loading="listLoading"
      :data="customerList"
      :header-cell-style="{ background: '#F5F5F5', color: '#000' }"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" label="客户编号" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.customer_code }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :show-overflow-tooltip="true"
        label="客户名称"
        width="300"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.customer_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客户管理人" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.customer_account_managers }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="建档日期" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.create_date | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="修改日期" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.create_date | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="合同数量" width="80">
        <template slot-scope="scope">
          <router-link
            to="/contract/list"
            style="color: #0a76a4; text-decoration: underline"
          >
            <span>{{ scope.row.contract_count }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="案件数量" width="80">
        <template slot-scope="scope">
          <router-link
            to="/case/lawsuit/civil/list"
            style="color: #0a76a4; text-decoration: underline"
          >
            <span>{{ scope.row.case_count }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        v-if="loginType === 1"
        align="center"
        label="应收款金额"
        width="120"
      >
        <template>
          <span>0</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客户状态" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.customer_status | formatCustomerStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.customer_type | formatCustomerType }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div class="actionClass">
            <router-link :to="'/customer/edit/' + scope.row.id">
              <span>编辑</span>
            </router-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :limit.sync="listQuery.pageSize"
      :page.sync="listQuery.pageIndex"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getCustomerList } from "@/api/customer";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import { uploadFile } from "@/api/qiniu";
import store from "@/store";

export default {
  name: "CustomerList",
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
    formatDate(time) {
      time = time * 1000;
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    formatDateFormatYMD(time) {
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    formatCustomerStatus(status_id) {
      const option_customer_status = [
        { value: 1, label: "潜在" },
        { value: 2, label: "目标" },
        { value: 3, label: "立项" },
        { value: 4, label: "关怀" },
        { value: 5, label: "签约" },
        { value: 6, label: "谈判" },
        { value: 7, label: "价值" },
      ];
      return (
        option_customer_status.find((item) => item.value === status_id) || { label: "" }
      ).label;
    },
    formatCustomerType(type_id) {
      const option_customer_types = [
        { value: 1, label: "客户" },
        { value: 2, label: "当事人" },
      ];
      return (
        option_customer_types.find((item) => item.value === type_id) || { label: "" }
      ).label;
    },
  },
  data() {
    return {
      loginType: store.getters.loginType,
      customerList: [],
      total: 0,
      listLoading: true,
      listQuery: {
        customer_name: "",
        customer_type: 1,
        customer_account_managers: "",
        pageIndex: 1,
        pageSize: 10,
      },
      option_customer_types: [
        { value: 1, label: "客户" },
        { value: 2, label: "当事人" },
      ],
      customer_id: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    computeTableIndex(index) {
      return index + 1;
    },
    getList() {
      this.listLoading = true;
      getCustomerList(this.listQuery)
        .then((response) => {
          this.customerList = response.data;
          this.total = response.page_count;
          this.listLoading = false;
        })
        .catch(() => {
          this.customerList = [];
          this.listLoading = false;
        });
    },
  },
};
</script>

<style>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.el-table {
  font-size: 13px;
}

.el-table th,
.el-table td {
  padding: 5px 0;
}

.el-input__inner {
  height: 30px;
}

.el-input__icon {
  line-height: 30px !important;
}
</style>
